.frame {
  position: absolute;
  width: 400px;
  height: 400px;
  inset: 0;
  margin: auto;
  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.center {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

input[type=radio] {
  display: none;
}

.circle {
  box-sizing: border-box;
  position: absolute;
  top: 175px;
  left: 115px;
  z-index: 5;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid #fff;
  cursor: pointer;
}

#c2 {
  left: 175px;
}

#c3 {
  left: 235px;
}

.active {
  position: absolute;
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  top: 180px;
  left: 120px;
  background: #fff;
  transition: all 1s ease;
}

#check-1:checked ~ .active {
  transform: translateX(0px);
}

#check-2:checked ~ .active {
  transform: translateX(60px);
}

#check-3:checked ~ .active {
  transform: translateX(120px);
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #3498bd;
  border-left: 400px solid #9b59b6;
  border-right: 400px solid #1abc9c;
  transition: all 1s ease;
  transform: translateX(0);
}

#check-1:checked ~ .bg {
  transform: translateX(0);
}

#check-2:checked ~ .bg {
  transform: translateX(-400px);
}

#check-3:checked ~ .bg {
  transform: translateX(-800px);
}